<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户CRUD</title>
    <!--使用Bootstrap-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<style>
/*奇数行表格颜色*/
.table-striped>tbody>tr:nth-child(odd)>td{
    background-color: #D9EDF7;
}
/*偶数行表格颜色*/
.table-striped>tbody>tr:nth-child(even)>td{
    background-color: #FCF8E3;
}
</style>
<!--调整整体外边距-->
<body style="padding:10px">

    <!--标题-->
    <h2 style="color:dimgrey">习题</h2>

    <!--功能按钮和查询输入框-->
    <form class="form-inline" style="margin:20px 0"><!--调整上下边距-->
            <div class="form-group">
                <!--关联模态框，模态框id为addmodal-->
                <button class="btn btn-info" type="button" data-toggle="modal" data-target="#addmodal">新增</button>
            </div>
            <div class="form-group">
                <button class="btn btn-info" type="button" id="delete">删除</button>
            </div>
            <div class="form-group">
                <button class="btn btn-info" type="button" id="set">编辑</button>
            </div>
            <div class="form-group">
                <button class="btn btn-info" type="button" id="inquiry">查询</button>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="byNum" placeholder="按工号查询">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="byName" placeholder="按姓名查询">
            </div>
    </form>

    <!--添加基本样式表格-->
    <table class="table table-striped">

        <!--标题行，即字段-->
        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <!--表格信息为空，页面加载完成后再显示-->
        <tbody></tbody>
    </table>

    <!--新增用户的模态框组件-->
    <div class="modal" id="addmodal" data-backdrop="static">
        <!--窗口-->
        <div class="modal-dialog">
            <!--内容-->
            <div class="modal-content">
                <!--头部-->
                <div class="modal-header">
                    <!--标题-->
                    <h2>新增用户</h2>
                </div>
                <!--身体-->
                <div class="modal-body">
                    <!--新增输入框-->
                    <form>
                        <!--新增工号-->
                        <div class="form-group">
                            <input type="text" class="form-control" id="newNum" placeholder="请输入工号">
                        </div>
                        <!--新增姓名-->
                        <div class="form-group">
                            <input type="text" class="form-control" id="newName" placeholder="请输入姓名">
                        </div>
                        <!--性别单选框-->
                        <div class="form-group" id="newSex">
                            <input type="radio" name="sex" value="男" checked>男
                            <input type="radio" name="sex" value="女">女
                        </div>
                        <!--新增密码-->
                        <div class="form-group">
                            <input type="text" class="form-control" id="newPassword" placeholder="请输入密码">
                        </div>
                        <!--新增出生日期-->
                        <div class="form-group">
                            <input type="date" class="form-control" min="1919-12-31" max="2020-01-01" id="newDate" placeholder="请输入出生日期">
                        </div>
                    </form>
                </div>
                <!--底部-->
                <div class="modal-footer">
                    <!--两粒按钮-->
                    <button class="btn btn-info" id="summit">确定</button> 
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>


    <!--修改用户的模态框组件-->
    <div class="modal" id="setmodal" data-backdrop="static">
        <!--窗口-->
        <div class="modal-dialog">
            <!--内容-->
            <div class="modal-content">
                <!--头部-->
                <div class="modal-header">
                    <!--标题-->
                    <h2>修改用户</h2>
                </div>
                <!--身体-->
                <div class="modal-body">
                    <!--修改功能-->
                    <form>
                        <!--修改工号-->
                        <div class="form-group">
                            <input type="text" class="form-control" id="setNum" placeholder="请输入工号">
                        </div>
                        <!--新增姓名-->
                        <div class="form-group">
                            <input type="text" class="form-control" id="setName" placeholder="请输入姓名">
                        </div>
                        <!--性别单选框-->
                        <div class="form-group" id="setSex">
                            <input type="radio" name="setsex" value="男" checked>男
                            <input type="radio" name="setsex" value="女">女
                        </div>
                        <!--新增密码-->
                        <div class="form-group">
                            <input type="text" class="form-control" id="setPassword" placeholder="请输入密码">
                        </div>
                        <!--新增出生日期-->
                        <div class="form-group">
                            <input type="date" class="form-control" min="1919-12-31" max="2020-01-01" id="setDate" placeholder="请输入出生日期">
                        </div>
                    </form>
                </div>
                <!--底部-->
                <div class="modal-footer">
                    <!--两粒按钮-->
                    <button class="btn btn-info" id="setSummit">确定</button> 
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>


    <!--引入js-->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>


    <script>
        //页面加载后显示用户列表
        $(document).ready(function(){
            //准备用户信息数组
            var user=[
                {"num": 1001, "name": "张三","sex":"女","password":1234,"age":"29","Date":"1991-1-1"},
                {"num": 1002, "name": "李四","sex":"男","password":1234,"age":"28","Date":"1992-2-2"},
                {"num": 1003, "name": "王五","sex":"女","password":1234,"age":"27","Date":"1993-3-3"},
                {"num": 1004, "name": "赵六","sex":"女","password":1234,"age":"26","Date":"1994-4-4"}
            ];
            //遍历数组每个元素
            for(var i = 0; i<user.length; i++){
                //构造节点
                var newTr = $(
                    `<tr>
                        <td><input class='nike' type='checkbox'></td>
                        <td class='num'>${user[i].num}</td>
                        <td class='name'>${user[i].name}</td>
                        <td class='sex'>${user[i].sex}</td>
                        <td class='password'>${user[i].password}</td>
                        <td class='age'>${user[i].age}</td>
                        <td class='date'>${user[i].Date}</td>
                    </tr>`
                );
                //插入节点到表格体中
                $("tbody").append(newTr);
            }
        });


        //实现提交新增用户功能
        $("#summit").click(function(){
            //判断是否有未填的信息
            var newNum = $("#newNum").val();
            var newName = $("#newName").val();
            var newPassword = $("#newPassword").val();
            var newDate = $("#newDate").val();
            if(newNum=="" || newName=="" || newPassword=="" || newDate==""){
                alert("请将信息填写完整");
                return;
            }
            //通过属性选择器得到列表中的工号
            var numArray = new Array();//声明一个数组用于存放得到的工号
            $(".num").each(function(){//遍历每个有num属性的节点，即工号
                var num = $(this).text();//得到每个工号，存入数组
                numArray.push(num);
            });
            //判断新增的工号是否已存在
            for(var i = 0; i<numArray.length ;i++){
                if(newNum == numArray[i]){
                    alert("工号已存在，请重新输入")
                    return;
                }
            }
            //得到性别
            var newSex = $("input[name='sex']:checked").val();
            //得到日期的年份，用于判断合理值和计算年龄
            var newYear = $("#newDate").val();//首先得到输入的日期
            var yearNum = newYear.substring(0,4);//通过String类substring方法得到日期的年份
            //判断新增的日期年份是否合理,因为影响年龄的范围，年份范围是1920年到2020年
            if(yearNum < 1920 || yearNum > 2020){
                alert("年份范围：1920~2020")
                return;
            }
            //得到年龄
            var newAge = 2020-yearNum;
            //新建<tr>节点
            var newTr = $(
                `<tr>
                    <td><input class='nike' type='checkbox'></td>
                    <td class='num'>${newNum}</td>
                    <td class='name'>${newName}</td>
                    <td class='sex'>${newSex}</td>
                    <td class='password'>${newPassword}</td>
                    <td class='age'>${newAge}</td>
                    <td class='date'>${newDate}</td>
                </tr>`
            );
            //在表格最后方添加节点
            $("tbody").append(newTr);
            //隐藏模态框
            $("#addmodal").modal("hide");
        });


        //实现删除用户信息功能
        $("#delete").click(function(){
            //得到被选中的序号对象，再得到对应的祖先节点<tr>即对应的一条用户信息,通过remove移除
            $(".nike:checked").parents("tr").remove();
            
        });


        //实现编辑用户信息功能
        $("#set").click(function(){
            //声明一个数组用于记录被选中的复选框对象，即被选中的序号
            var arr = new Array();
            arr = $(".nike:checked");
            //进行判断
            //如果被选中的序号不止一条，则弹出提示信息
            if(arr.length > 1){
                alert("请不要同时选择多条用户信息进行修改")
            //如果没有序号被选中，弹出提示信息
            }else if(arr.length == 0){
                alert("请选择1条用户信息")
            //满足条件则开始对被选中的用户信息进行修改
            }else{
                //调用修改模态框
                $("#setmodal").modal();
                //判断修改模态框内的信息
                $("#setSummit").click(function(){
                    //判断是否有未填的信息
                    var setNum = $("#setNum").val();
                    var setName = $("#setName").val();
                    var setPassword = $("#setPassword").val();
                    var setDate = $("#setDate").val();
                    if(setNum=="" || setName=="" || setPassword=="" || setDate==""){
                        alert("请将信息填写完整");
                        return;
                    }
                    //通过属性选择器得到列表中的工号
                    var numArray = new Array();//声明一个数组用于存放得到的工号
                    $(".num").each(function(){//遍历每个有num属性的节点，即工号
                        var num = $(this).text();//得到每个工号，存入数组
                        numArray.push(num);
                    });
                    //将现在修改中的用户信息的工号从数组中删除，避免提示工号已存在
                    var checkedNum = $(".nike:checked").parent().next().text();//首先选中被勾选序号节点的父节点<td>，然后选择下一个同辈节点，即工号的<td>，再获取工号
                    var index = numArray.indexOf(checkedNum);//获取对应工号在工号数组中的下标
                    numArray.splice(index,1);//通过数组的splice方法，将对应下标的工号删除
                    console.log(numArray);
                    //判断修改的工号是否已存在
                    for(var i = 0; i<numArray.length ;i++){
                        if(setNum == numArray[i]){
                            alert("工号已存在，请重新输入")
                            return;
                        }
                    }
                    //得到性别
                    var setSex = $("input[name='setsex']:checked").val();
                    //得到日期的年份，用于判断合理值和计算年龄
                    var setYear = $("#setDate").val();//首先得到输入的日期
                    var yearNum = setYear.substring(0,4);//通过String类substring方法得到日期的年份
                    //判断修改的日期年份是否合理,因为影响年龄的范围，年份范围是1920年到2020年
                    if(yearNum < 1920 || yearNum > 2020){
                        alert("年份范围：1920~2020")
                        return;
                    }
                    //得到年龄
                    var setAge = 2020-yearNum;
                    //新建<tr>节点
                    var setTr = $(
                        `<tr>
                            <td><input class='nike' type='checkbox'></td>
                            <td class='num'>${setNum}</td>
                            <td class='name'>${setName}</td>
                            <td class='sex'>${setSex}</td>
                            <td class='password'>${setPassword}</td>
                            <td class='age'>${setAge}</td>
                            <td class='date'>${setDate}</td>
                        </tr>`
                    );
                    
                    //替换节点
                    $(".nike:checked").parents("tr").replaceWith(setTr);
                    //隐藏模态框
                    $("#setmodal").modal("hide");
                });
            }
        });


        //实现查询功能
        $("#inquiry").click(function(){
            
            var byNum = $("#byNum").val();//声明一个变量记录工号输入框的值
            var numArray = new Array();//声明一个数组用于存放得到的工号
            $(".num").each(function(){//遍历每个有num属性的节点，即工号
                var num = $(this).text();//得到每个工号
                if(num==byNum){//判断是否有与输入工号相同的工号
                    $(this).parent().siblings().hide();//若相同，则选择此工号对应的用户信息以外的其他用户信息节点，隐藏
                }
            });
            
            var byName = $("#byName").val();//声明一个变量记录姓名输入框的值
            var nameArray = new Array();//声明一个数组用于存放得到的姓名
            $(".name").each(function(){//遍历每个有name属性的节点，即姓名
                var name = $(this).text();//得到每个姓名
                if(name==byName){//判断是否有与输入姓名相同的姓名
                    $(this).parent().siblings().hide();//若相同，则选择此姓名对应的用户信息以外的其他用户信息节点，隐藏
                }
            });
            
            //当两个输入框失去焦点时将所有用户信息再次显示
            $("#byNum,#byName").blur(function(){
                $("tr").show();
            });
            
        });

        
    </script>

</body>
</html>